// Source images
!btn_v_dec = inline_image("btn_v_dec.png")
!btn_v_inc = inline_image("btn_v_inc.png")
!btn_h_dec = inline_image("btn_h_dec.png")
!btn_h_inc = inline_image("btn_h_inc.png")
!btn_v_dec_d = inline_image("btn_v_dec_d.png")
!btn_v_inc_d = inline_image("btn_v_inc_d.png")
!btn_h_dec_d = inline_image("btn_h_dec_d.png")
!btn_h_inc_d = inline_image("btn_h_inc_d.png")

!throb_v_back = inline_image("throb_v_back.png")
!throb_v_hdl = inline_image("throb_v_hdl.png")
!throb_v_border = inline_image("throb_v_border.png")
!throb_h_back = inline_image("throb_h_back.png")
!throb_h_hdl = inline_image("throb_h_hdl.png")
!throb_h_border = inline_image("throb_h_border.png")

!trk_v_back = inline_image("trk_v_back.png")
!trk_v_bottom = inline_image("trk_v_bottom.png")
!trk_v_top = inline_image("trk_v_top.png")
!trk_h_back = inline_image("trk_h_back.png")
!trk_h_left = inline_image("trk_h_left.png")
!trk_h_right = inline_image("trk_h_right.png")

// Element widths
!trk_width = 16px
!trk_height = "#{!trk_width}"

!btn_v_height = 20px
!btn_h_width = 16px

// Marker rule, used to identify the stylesheet from JS
.light_themes_scrollbars
  display: none

::-webkit-scrollbar 
  background: #f0ebe2
  &:vertical
    width = !trk_width
  &:horizontal
    height = !trk_height

::-webkit-scrollbar-corner
  background: #f0ebe2

::-webkit-scrollbar-track-piece
  &:vertical
    background-repeat: no-repeat, repeat-y
    width= !trk_width
    &:start
      background-image = !trk_v_top, !trk_v_back
      background-position: top left, 0 0
    &:end
      background-image = !trk_v_bottom, !trk_v_back
      background-position: bottom left, 0 0
  &:horizontal
    background-repeat: no-repeat, repeat-x
    height= !trk_height
    &:start
      background-image = !trk_h_left, !trk_h_back
      background-position: top left, 0 0
    &:end
      background-image = !trk_h_right, !trk_h_back
      background-position: top right, 0 0


::-webkit-scrollbar-button
  &:vertical
    height = !btn_v_height
    &:start:decrement
      background-image = !btn_v_dec
      &:disabled
        background-image = !btn_v_dec_d
    &:end:increment
      background-image = !btn_v_inc
      &:disabled
        background-image = !btn_v_inc_d
  &:horizontal
    width = !btn_h_width
    &:start:decrement
      background-image = !btn_h_dec
      &:disabled
        background-image = !btn_h_dec_d
    &:end:increment
      background-image = !btn_h_inc
      &:disabled
        background-image = !btn_h_inc_d

::-webkit-scrollbar-thumb
  &:vertical
    -webkit-border-image= "#{!throb_v_border} 7 0 7 0 / 7px 0 7px 0 round"
    background = "#{!throb_v_hdl} left center no-repeat, #{!throb_v_back} top left repeat-y"
    -webkit-background-clip: padding-box
    min-height: 36px
  &:horizontal
    -webkit-border-image= "#{!throb_h_border} 0 7 0 7 / 0 7px 0 7px round"
    background = "#{!throb_h_hdl} center bottom no-repeat, #{!throb_h_back} top left repeat-x"
    -webkit-background-clip: padding-box
    min-width: 36px

